<template>
  <view-card :title="title">
    <main class="play_main">
      <div class="play_chart" ref="play_chart">
      </div>
    </main>
  </view-card>
</template>

<script>
import {option} from '../charts/playListCharts'
import api from '@/network/api';

export default {
  name: "playList",
  data() {
    return {
      title: '我的歌单',
      playOption: option
    }
  },
  methods: {
    initChart(opt) {
      let myChart = this.$echarts.init(this.$refs.play_chart)
      myChart.setOption(opt)
    },
    getData() {
      api.getPlayList().then(response => {
        let playList = response['playlist']
        let playName = []
        let playNum = []
        let playHot = []
        for (let item of playList) {
          playName.push(item['name'])
          playNum.push(item['trackCount'])
          playHot.push(item['playCount'])
        }
        // this.playOption["yAxis"][0]["data"] = playName
        this.playOption["series"][0]["data"] = playNum
        this.playOption["series"][1]["data"] = playHot.map(item=>{
          return Math.round(Math.log(item))
        })
        // console.log(this.playOption)
      })
    }
  },
  mounted() {
    this.initChart(this.playOption)
    this.getData()
    // setTimeout(function (){},5000)

  },
  watch:{
    playOption:{
      handler(newVal,oldVal){
        this.initChart(newVal)
      },
      deep:true
    }
  }
}
</script>

<style scoped>

</style>
